<template>
	<div class="big_screen_model" id="big_search_tabel">
		<div class="model_title">
			<img src="/img/bigScreen/010.png" alt="" style="display: block;"/>
		</div>

		<div class="model_echarts" id="camera_tabel_wrap">			
			<el-table :data="tableData" stripe style="width: 100%"  :max-height="maxHeight" >
				<el-table-column prop="name" label="编码" >
				</el-table-column>
				<el-table-column prop="area" label="安装位置" >
				</el-table-column>
				<el-table-column prop="status" label="状态">
			      <template slot-scope="scope">
			        <div style="color: #FFFF00;">{{scope.row.status}}</div>		      
			      </template>					
				</el-table-column>
				<el-table-column prop="action" label="播放">
			      <template slot-scope="scope">
			      	<div class="video_wrap" @click="dialogVisible=true">
			      		<img src="/img/bigScreen/011.png" alt="" style="width: 30px;height:30px;"/>
			      	</div>
			        			      
			      </template>					
				</el-table-column>				
			</el-table>
		</div>
		
		<el-dialog
		  title="视频播放"
		  :visible.sync="dialogVisible"
		  width="30%"
		  append-to-body="true"
		  :before-close="handleClose">
		  <div>
		  	
		  	
		  </div>

		</el-dialog>		
		
	</div>
</template>

<script>
	export default {
		name: '监控摄像头',
		data() {
			return {
				dialogVisible:false,
				maxHeight:0,
				tableData: [{
					area: '液氮区',
					name: 'A 32',
					level: '一级',
					status:'上线'
				}, {
					area: '液氮区',
					name: 'B 07',
					level: '一级',
					status:'上线'
				}, {
					area: '液氮区',
					name: 'C 95',
					level: '一级',
					status:'上线'
				}, {
					area: '液氮区',
					name: 'D 22',
					level: '一级',
					status:'上线'
				}, {
					area: '液氮区',
					name: 'E 18',
					level: '一级',
					status:'上线'
				}, {
					area: '液氮区',
					name: 'F 09',
					level: '一级',
					status:'上线'
				}]
			}
		},

		mounted() {           
            let max=document.getElementById('camera_tabel_wrap').offsetHeight-10
            this.$nextTick(function(){
            	this.maxHeight=max
            })

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped="">
	* {
		box-sizing: border-box;
	}
	
	.el-col {
		margin-bottom: 0;
	}

	.big_screen_model {
		display: flex;
		flex-direction: column;
		height: 100%;
		.model_echarts {
            padding: 0 15px 10px;
			flex: 1;
		}
		.video_wrap{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;cursor: pointer;
		  img{width: 40px;height: 40px;}
		}
	}
</style>